<template>
    <div class="imageAnnotate" :id="imgId" v-loading="loading" element-loading-text="正在加载中"></div>
</template>
<script>
import Vue from "vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import bus from "@/assets/js/bus";
import busType from "@/assets/js/busType";

export default {
    name: "imageAnnotate",
    props: {
        // editTemplate:null
    },
    data() {
        return {
            zr: null,
            init: true,
            imgId: "",
            loading: false,
            page: "",
            loadData: [],
            crData: [],
            currentImage: 0
        };
    },
    computed: {
        ...mapState(["labelState"]),
        ...mapGetters([
            "editTemplate",
            "tools",
            "toolsCount",
            "imageList",
            "markData"
        ])
    },
    created() {},
    mounted() {
        if (this.$route.name === "editpage") {
            this.initImage(this.editTemplate);
        }
        bus.$on(busType.RESETPOPOVER, x => {
            this.loading = true;
            this.initPolygon([]);
        });
        bus.$on(busType.DRAGOVER, x => {
            this.loading = false;
            this.initImage(this.editTemplate);
        });
    },
    beforeDestroy() {
        bus.$off(busType.RESETPOPOVER);
        bus.$off(busType.DRAGOVER);
    },
    watch: {
        markData: {
            handler: function(val, oldVal) {
                this.currentImage = 0;
                this.initImage(val);
            },
            deep: true
        },
        "editTemplate.imageList"(val, oldVal) {
            //图片更新
            this.currentImage = 0;
            this.initImage(val[0]);
        },
        toolsCount: {
            handler: function(val, oldVal) {
                if (this.tools === "drag") {
                    this.startDrag();
                }
                if (this.tools === "rotate") {
                    this.startRotate();
                }
                if (this.tools === "zoomin") {
                    this.startZoomIn();
                    this.startDrag();
                }
                if (this.tools === "zoomout") {
                    this.startZoomOut();
                    this.startDrag();
                }
                if (this.tools === "up") {
                    //上一页
                    if (this.$route.name === "successpage") {
                        this.startPrePage();
                    } else {
                        this.startEditPrePage();
                    }
                }
                if (this.tools === "down") {
                    //下一页
                    if (this.$route.name === "successpage") {
                        this.startNextPage();
                    } else {
                        this.startEditNextPage();
                    }
                }
            }
        }
    },
    methods: {
        startPrePage() {
            //翻页标志 0-上一页 1-下一页
            let id = this.$route.query.id;
            let pId = this.$route.query.pId || 0;
            let url = this.$resource.rollPage
                .replace("{pId}", pId)
                .replace("{resId}", this.$imageItem.id)
                .replace("{rollFlag}", 0);
            this.$axios({
                url: url,
                method: "get",
                params: {}
            })
                .then(res => {
                    if (res.data.msg === "success") {
                        if (res.data.data) {
                            bus.$emit(busType.RESETINDENTITY, res.data.data);
                        }
                    } else {
                        this.$message.info("当前是第一页");
                    }
                })
                .catch(e => {
                    this.$message.info("当前是第一页");
                });
        },
        startNextPage(x) {
            //翻页标志 0-上一页 1-下一页
            let id = this.$route.query.id;
            let pId = this.$route.query.pId || 0;
            let url = this.$resource.rollPage
                .replace("{pId}", pId)
                .replace("{resId}", this.$imageItem.id)
                .replace("{rollFlag}", 1);
            this.$axios({
                url: url,
                method: "get",
                params: {}
            })
                .then(res => {
                    if (res.data.msg === "success") {
                        if (res.data.data) {
                            bus.$emit(busType.RESETINDENTITY, res.data.data);
                        }

                        if (x === "toindex") {
                            //核对完成触发
                            bus.$emit(busType.REQUESTSUCCESSPAGE, 1);
                        }
                    } else {
                        if (x === "toindex") {
                            //核对完成触发
                            bus.$emit(busType.REQUESTSUCCESSPAGE, 1, "check");
                        } else {
                            this.$message.info("当前是最后一页");
                        }
                    }
                })
                .catch(e => {
                    this.$message.info("当前是最后一页");
                });
        },
        startEditPrePage() {
            if (this.currentImage === 0) {
                this.$message.info("当前是第一页");

                return;
            }
            this.currentImage--;
            this.$store.dispatch("setCurrentImage", this.currentImage);
            this.initImage(this.editTemplate.imageList[this.currentImage]);
        },
        startEditNextPage() {
            if (this.currentImage === this.editTemplate.imageList.length - 1) {
                this.$message.info("当前是最后一页");

                return;
            }
            this.currentImage++;
            this.$store.dispatch("setCurrentImage", this.currentImage);
            this.initImage(this.editTemplate.imageList[this.currentImage]);
        },
        initImage(val) {
            if (!val) {
                return;
            }
            // let data = val;
            const resPath = val.resPath;

            this.imgId = window.btoa(val.resId + "2019");
            this.loading = true;
            this.$nextTick(() => {
                let image = new this.$inMark.Image({
                    id: this.imgId,
                    mode: "original",
                    imgUrl: val.resPath,
                    event: {
                        onLoadComplete: this.loadComplete
                    }
                });

                Vue.prototype.$image = image;
                this.zr = image.getZrender();

                Vue.prototype.$zr = this.zr;

                this.init = false;
            });
        },
        startDrag() {
            this.reset();
            if (this.crData.length >= 0) {
                this.$polygon.setDrag(true);
            } else {
                this.$image.setDrag(true);
            }
        },
        startRotate() {
            this.$image.rotate("clockwise", 90);
        },
        startZoomIn() {
            this.$polygon && this.$polygon.close();
            this.$image.zoomIn();
        },
        startZoomOut() {
            this.$polygon && this.$polygon.close();
            this.$image.zoomOut();
        },
        loadComplete() {
            this.initPolygon([]);

            this.startDrag();
            this.loading = false;
        },
        initPolygon(data) {
            this.crData = data;
            let polygon = new this.$inMark.Rect(this.$image, {
                data: data,
                isOpen: false,
                event: {
                    onCreateComplete: this.onCreateComplete,
                    onRectDrag: this.onRectDrag,
                    onRectDragComplete: this.onRectDragComplete,
                    onEditNodeDrag: this.onEditNodeDrag,
                    onEditNodeDragComplete: this.onEditNodeDragComplete,
                    onSelected: this.onSelected,
                    unSelect: this.unSelect
                }
            });
            // polygon.setData(s);
            Vue.prototype.$polygon = polygon;

            this.init = false;
        },
        getShapeData() {
            return this.$polygon.getShapeData();
        },
        onSelected(e, data) {
            this.$store.dispatch("setMarkSelected", data);
        },
        setData(data) {
            // this.$polygon.setData(data);
        },
        reset() {
            // this.markNoteList.splice(0);
            this.$polygon && this.$polygon.setDrag(false);
            this.$polygon && this.$polygon.close();
        }
    }
};
</script>
<style>
.imageAnnotate {
    width: 100%;
    /*减去工具栏的高度*/
    height: calc(100% - 32px);
    position: relative;
}
</style>
